<template>
	<div class="type">
		<aside>
			<span>书城管理——书城一级管理</span>
			<button @click="html()"><i class="el-icon-refresh-right"></i></button>
		</aside>
		<template>
			<el-table :data="find" style="width: 95%;margin: 0 auto;" border>
				<el-table-column prop="id" label="一级ID">
				</el-table-column>
				<el-table-column prop="prio" label="顺序">
				</el-table-column>
				<el-table-column prop="name" label="一级名称">
				</el-table-column>
				<el-table-column type="expand" label="二级信息">
					<template slot-scope='props'>
						<el-table :data="props.row.children" border style="width: 45%;margin: 0 auto;">
							<el-table-column prop="label" label="二级信息" width="300">
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="200">
								<template slot-scope="scope">
									<el-button @click="goUpdate(scope.row.value)" type="primary" size="small">
										<i class="el-icon-edit"></i>
									</el-button>
									<el-button @click="remove(scope.row.value)" type="primary" size="small">
										<i class="el-icon-close"></i>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="goAdd(scope.row.id)" type="primary" size="small">
							添加
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<el-dialog :title="title" :visible.sync="centerDialogVisible" width="30%" center>
			<el-form :model="ruleForm2" status-icon :rules="rules" ref="ruleForm" label-width="100px"
				class="demo-ruleForm">
				<el-form-item label="父级ID" prop="pass">
					<el-input type="text" v-model="ruleForm2.id" autocomplete="off" readonly></el-input>
				</el-form-item>
				<el-form-item label="一级名称" prop="name">
					<el-input type="text" v-model="ruleForm2.name" readonly></el-input>
				</el-form-item>
			</el-form>
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
				class="demo-ruleForm">
				<el-form-item label="顺序" prop="prio">
					<el-input type="text" v-model="ruleForm.prio" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="二级名称" prop="name">
					<el-input type="text" v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm()"
						style="margin-left: 20px; width: 300px;">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'AdminType2',
		data() {
			var validate = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('不能为空'));
				} else {
					callback();
				}
			};
			return {
				title: '添加',
				options: [],
				centerDialogVisible: false,
				all: [],
				ruleForm2: {},
				ruleForm: {
					id: 0,
					pid: 0,
					prio: 100,
					name: ''
				},
				rules: {
					id: [{
						validator: validate,
						trigger: 'blur'
					}],
					prio: [{
						validator: validate,
						trigger: 'blur'
					}],
					name: [{
						validator: validate,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			html() {
				location.reload();
			},
			remove(id) {
				console.log(id);
				this.$get('/api/adm/type/remove/' + id).then((resp) => {
					console.log(resp.data);
					this.$message({
						message: resp.data.msg,
						type: 'success',
					});
				})
			},
			goAdd(id) {
				this.$get('/api/adm/type/findById/' + id).then((resp) => {
					this.ruleForm2 = resp.data.data;
					console.log(this.ruleForm2);
				})
				this.centerDialogVisible = true;
				this.title = '添加';
				this.ruleForm = {
					id: 0,
					pid: 0,
					prio: 100,
					name: ''
				}
			},
			goUpdate(id) {
				this.title = "修改";
				this.centerDialogVisible = true;
				this.$get('/api/adm/type/findById/' + id).then((resp) => {
					this.ruleForm = resp.data.data;
					console.log(resp.data.data);
					this.$get('/api/adm/type/findById/' + resp.data.data.pid).then((resp) => {
						this.ruleForm2 = resp.data.data;
						console.log(this.ruleForm2);
					})
				})

			},
			submitForm() {
				if (this.ruleForm.name == '') {
					this.$message({
						message: "名称不能为空",
						type: 'error',
					});
					return;
				}
				this.all = [];
				this.ruleForm.pid = this.ruleForm2.id;
				this.centerDialogVisible = false;
				this.$postkv('/api/adm/type/add', this.ruleForm).then((resp) => {
					console.log(resp.data.data);
					this.all = resp.data.data;
					if (this.ruleForm.id == 0) {
						this.$message({
							message: '添加成功',
							type: 'success',
						})
					} else {
						this.$message({
							message: '修改成功',
							type: 'success',
						})
					}

				})

				this.ruleForm = {};
			},

		},
		computed: {
			find() {
				this.options = [];
				this.all.map((item, i) => {
					if (item.pid == 0) {
						this.options.push({
							id: item.id,
							name: item.name,
							prio: item.prio,
						})
					}

				});

				this.options.forEach((item) => {
					let list = [];
					this.all.map((j) => {
						if (item.id == j.pid && j.pid > 0) {
							list.push({
								value: j.id,
								label: j.name,
							})
							console.log(list);
						}
					})
					item.children = list;
				})
				console.log(this.options);
				return this.options;
			}
		},
		mounted() {
			this.$get('/api/adm/type/findAll2').then((resp) => {
				this.all = resp.data.data;
			})
		}
	}
</script>

<style scoped>
	a {
		color: white;
	}

	.type {
		width: 83%;
		height: 90vh;
		margin-left: 2%;
	}

	.type aside {
		width: 95%;
		margin: 20px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: gainsboro 1px solid;
	}

	.type aside button {
		background-color: #009688;
		border: none;
		outline: none;
		color: white;
		height: 40px;
		width: 60px;
		border-radius: 3px;
	}

	.type aside span {
		font-size: 15px;
	}

	.type .btu {
		background-color: #009688;
		color: white;
		border: none;
		outline: none;
		width: 150px;
		height: 40px;
		border-radius: 5px;
		margin-left: 40px;
		margin-bottom: 20px;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
</style>